<template>
	<view class="content">
		<view class="top-view" @tap="serch()">
			<image src="../../static/searchs.png" mode=""></image>
			<input placeholder-class="serce" placeholder="搜索关键词" />
		</view>
		<!--banner-->
		<view class="wrap">
			<swiper class="swiper"
				indicator-dots="true" 
				autoplay="true" 
				interval="5000" 
				duration="1500"	>
				<swiper-item v-for="(item , index) in list" :key="index" class="image-swiper">
					<image class="imagess" :src="item.image" @click="join(item.join_type,item.join_id)" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!--资讯-->
		
		<view class="bg display">
			<view class="">
				<swiper style="width: 140rpx;height: 70rpx;" :autoplay="true" :interval="3000"
					:duration="1000">
					<swiper-item>
						<view class="" style="line-height: 70rpx;text-align: center;font-size: 20px;font-weight: bold;color: #FF9101;">
							资讯
						</view>
					</swiper-item>
				</swiper>
			</view>
			<swiper style="height: 90rpx;width: 450rpx;" vertical="true" :autoplay="true" :interval="3000"
				:duration="1000">
				<swiper-item v-for="(item,index) of article" :key='index' style="height: 70rpx;width: 600rpx;" @click="transmit(item.id)">
					<view class="display01 font-size-24">
						<view class="text-ellipsis" style="font-size: 16px">
							{{item.msg}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!--金刚区-->
<!-- 		<view class="kongKimBox">
			<view class="kongList" v-for="(item,index) in class_list" :key="index" @tap="classify(item.url)">
				<image :src="item.image" mode=""></image>
				<view class="">{{item.name}}</view>
			</view>
		</view> -->
		
		<!--会员专区-->
		<view class="indexHot">
			<view class="hotTitl">
				<view class="left">会员专区</view>
				<view class="right" @tap="all">全部会员商品></view>
			</view>
			<scroll-view scroll-x="true" class="kite-classify-scroll" >
				<!-- <view v-for="(item,index) of scrollList" :key='index' class="scroll" :class="currentIndex== index?'active':''" @click="chooseItem(index)">
					{{item.name}}
				</view> -->
				<view class="nearComm"  v-for="(item,index) in lists" :key="index" @tap="go_shopdetail(item)">
          <view class="new01">
					  <image :src="item.image" mode=""></image>
					  <view class="commName">{{item.name}}</view>
					  <view class="commPrice">￥<text style="font-size: 20px;color: #FF0000;margin: 0;">{{item.prices}}</text></view>
          </view>
          
          <view style="clear:both"></view>
				</view>
			</scroll-view>
		</view>
		
		
		<!-- <view class="tuiTitle">商城</view>
		<u-tabs :list="shop_area" :is-scroll="true" :current="current" @change="change" active-color="#FF9101" bar-width="150" inactive-color="#333333"></u-tabs>
		<view class="options display">
			
			<view class="option" @click="options(0)">
				<text style="padding-right: 5px;">默认排序</text>
				<u-icon name="arrow-down-fill" color="#999999" size="20"></u-icon>
			</view>
			<view class="option" @click="options(1)">
				<text style="padding-right: 5px;">销量</text>
				<u-icon name="arrow-down-fill" color="#999999" size="20" v-if="sales!=3"></u-icon>
				<u-icon name="arrow-up-fill" color="#999999" size="20" v-else></u-icon>
			</view>
			<view class="option" @click="options(2)">
				<text style="padding-right: 5px;">价格</text>
				<u-icon name="arrow-down-fill" color="#999999" size="20" v-if="price!=5"></u-icon>
				<u-icon name="arrow-up-fill" color="#999999" size="20" v-else></u-icon>
			</view>
		</view>
		<view class="waterBox">
			<u-waterfall v-model="shopList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<shop v-for="(item,index) in leftList" :key="index" :shopimg="item.image" :shopname="item.name" :oldprice="item.market_price" :newprice="item.prices"  @click.native="go_shopdetail(item)"></shop>
				</template>
				<template v-slot:right="{rightList}">
					<shop v-for="(item,index) in rightList" :key="index" :shopimg="item.image" :shopname="item.name" :oldprice="item.market_price" :newprice="item.prices" @click.native="go_shopdetail(item)"></shop>
				</template>
			</u-waterfall>
		</view> -->
		
		
		<view class="video_list">
			<view class="tuiTitle">健康讲座</view>
			<view class="v_list">
				<view class="le " v-for="(item,index) in v_lists" @tap="go_videode(item)">
					<view class="v1">
						<video :src="item.file" bindplay="onVideoPlay" bindpause="onVideoPause" show-play-btn="false"></video>
					</view>
					
					<text class="text1"></text>
					<view class="video_tit">{{item.title}}</view>
				</view>
				<view class="clearfix"></view>
			</view>
			
		</view>
		<tab-bar ref='tabbar'></tab-bar>
	</view>
</template>

<script>
	import shop from "../../components/shop.vue"
	
	export default {
		components:{
			shop
		},
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				class_list:[{
					img:'../../static/logo.png',
					name:'自营商超'
				},{
					img:'../../static/logo.png',
					name:'个人小店',
					url:'myShop'
				},{
					img:'../../static/logo.png',
					name:'积分商城'
				},{
					img:'../../static/logo.png',
					name:'加油省钱'
				}],
				lists:[],
				article:[{title:'123456'},{title:'123456'}],
				shopList:[],
				sales:0,
				price:0,
				shop_area: [{
					name: '平台自营'
				}, {
					name: '百货专区'
				}, {
					name: '健康专区'
				},],
				type:1,
				current:0,
				page:1,
				v_lists:[],
			}
		},
		onLoad(options) {
			this.getIndex(1)
			this.getGoods()
			this.getshopList()
			this.videoList()
			if(options){
				const sceneStr = decodeURIComponent(options.scene);//这里的值就是二维码里带的参数值
				uni.setStorageSync('pid',sceneStr.split('-')[0])
			}			
		},
    onShow(){
      this.$refs.tabbar.getCount();
    },
		onReachBottom() {//触底获取推荐商品
			this.page+=1;
			this.getGoods(1,0);
		},
		methods: {
			//视频列表
			videoList(){
			  this.$myRequest({
			    url: 'api/index/Get_video',
			    method:'GET',
			  }).then(res=>{
			    console.log(res.data.data,"res列表");
			    if(res.data.code==1){
			       this.v_lists = res.data.data
			    }
			  })
			},
			go_videode(e){
				uni.navigateTo({
					url:'../shop/videoDetail?videoid='+e.id
				})
			},
			
			change(index) {
				this.current = index;
				// this.type = index>=1?this.current+2:this.current+1;
				this.type = this.shop_area[index].id
				this.page=1;
				this.$refs.uWaterfall.clear(); //清空列表数据
				this.getGoods(1,0)
			},
			is_login(){ //判断是否登录
				if(!uni.getStorageSync("user")){
					uni.showToast({
						icon:'none',
						title:'请先登录'
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:"../login"
						})
					},800)
					return false;
				}else{
					return true;
				}
			},
			serch(){//搜索
			if(!this.is_login()) return  //未登录 去登录
				uni.navigateTo({
					url:'../search'
				})
			},
			getIndex(){
				this.$myRequest({
					url: 'api/index',
					method:'POST',
				}).then(res => {
					if(res.data.code==1){
						let data=res.data.data
						this.list = data.img_list
						this.class_list = data.class_list
						this.article = data.msg
						this.lists = data.user_goods
						// if(data.goods_list.length>0){
						// 	this.shopList.push(...data.goods_list)
						// }
					}
				})
			},
			getGoods(sort,price){
				this.$myRequest({
					url: 'api/goods/goodsList',
					method:'POST',
					data:{
						page:this.page,
						type_switch:this.type,
						sort:sort,
						name:this.name,
						num:10,
					}
				}).then(res => {
					//console.log(res.data,'787878');
					if(res.data.code==1){
						let data=res.data.data
						//console.log(data,'99999');
						if(data.goodslist.length>0){
							this.shopList.push(...data.goodslist)
						}
					}
				})
			},
			options(e){ //选择排序
				if(e==0){
					this.page=1
					this.shopList=[]
					this.$refs.uWaterfall.clear(); //清空列表数据
					this.getGoods(1,'') //获取推荐商品
				}
				if(e==1){
					this.page=1
					this.sales= this.sales==3 ? 4 : 3
					console.log(this.sales);
					this.shopList=[]
					this.$refs.uWaterfall.clear(); //清空列表数据
					this.getGoods(this.sales) //排序获取推荐商品
				}
				if(e==2){
					this.page=1
					this.price= this.price==5 ? 6 : 5
					this.shopList=[]
					this.$refs.uWaterfall.clear(); //清空列表数据
					this.getGoods(this.price) //排序获取推荐商品
				}
			},
			all(){//全部会员商品
				uni.navigateTo({
					url:'../shop/vipShop'
				})
			},
			go_shopdetail(e){
				uni.navigateTo({
					url:'../shop/shopDetail?shopid='+e.id
				})
			},
			getshopList(){
				this.$myRequest({
					url: 'api/Goods/category',
					method:'get',
				}).then(rs=>{
					this.shop_area = rs.data.data.category
				})
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-scroll-box{
		display:flex;
	}
	page{background: #FAFAFA;}
	.top-view {
		width: 90%;
		margin: 20rpx auto;
		height: 40px;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20px;
		display: flex;
		align-items: center;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
		input {
			width: 100%;
			height: 40px;
			font-size: 14px;
			font-weight: 500;
			line-height: 40px;
			color: #807B7A;
			margin-left: 20px;
		}
		.serce{
			color: #807B7A;
		}
	}
	.wrap{
		width: 90%;
		margin: 50rpx auto 40rpx auto;
		/* 轮播 */
		.swiper{
			height: 140px;
		}
		.imagess{
			width: 100%;
			margin: auto;
			height: 140px;
			border-radius: 8px;
		}
	}
	//金刚区
	.kongKimBox{
		width: 88%;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		font-size: 12px;
		color: #333333;
		.kongList{
			width: 20%;
			padding-top: 40rpx;
			text-align: center;
			image{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
		}
		.kongList:after{
			width: 20%;
			content: "";
			height: 0;
		}
	}
	.indexHot{
		width: 90%;
		margin: auto;
		height: 586rpx;
		border-radius: 16rpx;
		background: linear-gradient(180deg, rgba(255, 222, 184, 0.35) 0%, rgba(255, 240, 204, 0.09) 28%, rgba(255, 254, 251, 0) 61%, #FFFFFF 100%);
		.hotTitl{
			width: 90%;
			margin: auto;
			padding-top: 40rpx;
			display: flex;
			justify-content: space-between;
			.left{
				font-size: 16px;
				font-weight: bold;
				line-height: 22px;
				color: #333333;
			}
			.right{
				font-size: 14px;
				line-height: 20px;
				color: #999999;
			}
		}
	}
	.options{
		padding-bottom: 20rpx;
		.option{
			padding-right: 50rpx;
		}
	}
	.kite-classify-scroll{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    height: auto;
    /* margin: 0 auto 20rpx; */
    height: auto;
    margin-bottom: 20rpx;
    padding: 0 10rpx;
	   /* width:90%;
		// height: 70rpx;
		overflow: hidden;
	 	white-space: nowrap;
		margin-bottom: 20rpx;
		margin-left: 40rpx;*/
	}
	.kite-classify-scrolls{
		width:79%;
		height: 60rpx;
		overflow: hidden;
		white-space: nowrap;
		margin-bottom: 20rpx;
		margin-left: 40rpx;
	}
	.kite-classify-cell{
		display: inline-block;
		width: 150rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 4px;
		margin-right: 20rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 60rpx;
		color: #666666;
	}
  .new01{ /*float:left; width: 47%; margin-left: 2%;*/}
	.nearComm{
    width: 47%;
		margin: 24rpx 24rpx 0 0;
		display: inline-block;
		image{
			width: 100%;
			height: 350rpx;
			border-radius: 4px;
		}
		.commName{
			font-size: 14px;
			color: #333333;
		}
		.commPrice{
			font-size: 13px;
			font-weight: bold;
			color: #FF0000;
			text{
				font-size: 10px;
				font-weight: 500;
				color: #CCCCCC;
				margin-left: 10rpx;
			}
		}
	}
	.indexStatus{
		width: 100%;
		margin: 40rpx auto 0 auto;
		position: relative;
		.active {
			background: rgba(84, 150, 249, 0.3)!important;
			color: #5496F9!important;
		}
		.statu{
			position: absolute;
			right: 15px;
			bottom: 0px;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.nearTop{
		width: 90%;
		margin:0 auto 20rpx auto;
		height: 210px;
		background: #FFFFFF;
		box-shadow: 0px 3px 6px rgba(229, 229, 229, 0.16);
		opacity: 1;
		border-radius: 8px;
		.topLeft{
			margin-left: 40rpx;
			.topShoop{
				font-size: 16px;
				font-weight: bold;
				color: #333333;
				margin-bottom: 8rpx;
			}
			.topClass{
				font-size: 12px;
				color: #666666;
			}
		}
		.topRight{
			.topMi{
				font-size: 12px;
				color: #999999;
				image{
					width: 12rpx;
					height: 20rpx;
					margin: 0 20rpx;
				}
			}
			.topTime{
				margin-top: 16rpx;
				font-size: 11px;
				color: #333333;
			}
		}
		.nearCommdity{
			width: 90%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			margin-top: 16rpx;
			.nearComm{
				image{
					width: 186rpx;
					height: 140rpx;
					border-radius: 4px;
				}
				.commName{
					font-size: 14px;
					color: #333333;
				}
				.commPrice{
					font-size: 13px;
					font-weight: bold;
					color: #FF0000;
					text{
						font-size: 10px;
						font-weight: 500;
						color: #CCCCCC;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
	.bg{border-radius:16rpx;}
	.display{
		width: 90%;
		height: 90rpx;
		margin: auto;
		.text-ellipsis{
			line-height: 90rpx;
		}
	}
  .display01{
    width: 100%;
    height: 90rpx;
    margin: auto;
    .text-ellipsis{
      line-height: 90rpx;
    }
  }
	.waterBox{
		width: 90%;
		margin: auto;
	}
	.tuiTitle{
		font-size: 36rpx;
		text-align: center;
		line-height: 100rpx;
		font-weight: bold;
		color: #333333;
	}
	.video_list{ padding-bottom: 180rpx;
		.v_list{ width: 90%; margin:0 auto;
			.le{ width: 49%; margin-top: 20rpx; position: relative;
				.text1{ position: absolute; top: 0; left:0; width: 100%; height: 100%; z-index: 1;}
				video{ width: 100%;}
				.v1{display: flex; justify-content: center; align-items: center;height: 200rpx; width: 100%; overflow: hidden;
				border-radius: 15rpx;}
				.video_tit{ text-align: center; padding: 10rpx 0;white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; }
			}
			.le:nth-child(odd){ float: left;}
			.le:nth-child(even){ float: right;}
		}
	}
	.clearfix{
	     clear: both;
	     width: 0;
	     height: 0;
	     overflow: hidden;
	}
	 
</style>
